<div>
	<!-- widget content -->
	<div class="widget-body">

		<form action="" method="post" id="checkout-form" class="smart-form">
			<header>
				<h2>
					版本变更
					<button class="close" data-dismiss="modal">x</button>
				</h2>
			</header>
			<fieldset>
				<div id="dialog-alert"></div>
				<div class="row">
					<label class="label col col-3">版本选择</label>
					<section class="col col-8">
						<label class="select select-multiple"> <select
							class="required" placeholder="选择套餐..." id="version"
							name="version">
						</select>
						</label>
					</section>
				</div>
			</fieldset>
		</form>
	</div>
	<!-- end widget content -->
</div>
<div class="modal-footer">
	<button type="button" class="btn btn-default btn-sm"
		data-dismiss="modal">取消</button>
	<button type="submit" class="btn btn-primary btn-sm" id="submitbtn">
		保存</button>
</div>

<script>
	var version,$version;
	var softwareVersion;
	var dateSizeSmall;
	var flgScales = true;
    pageSetUp();
    var pagefunction = function() {
    	$version = $("#version").selectize({
    		valueField: 'id',
			labelField: 'text',
			searchField: 'text',
    		create: false,
    		sortField: {field: 'text'},
    		options: []
    	});
    	
    	s = $("#jqgrid").jqGrid('getGridParam', 'selarrrow');
        serviceId = $("#jqgrid").jqGrid('getRowData',s).id;
        
    	sendGet("/upm_manager/v1.0/selections/software/versions?site="+getSession("siteId")+"&software_type=upsql",fillForm,DialogAlert,null);
    	
        var errorClass = 'invalid';
        var errorElement = 'em';
        var option={ 
            errorClass: errorClass,
            errorElement:errorElement,
            highlight: function(element) {
                $(element).parent().removeClass('state-success').addClass("state-error");
                $(element).removeClass('valid');
            },
            unhighlight: function(element) {
                $(element).parent().removeClass("state-error").addClass('state-success');
                $(element).addClass('valid');

            },
            // Rules for form validation
            rules: {
            	version: {
                     required : true
                }
            },
            // Messages for form validation
            messages:{
            	version : {
                    required : '请选择软件版本'
                }
            },
            errorPlacement : function(error, element) {
                if($(element).next("div").hasClass("tooltip")) {
                    $(element).attr("data-original-title", $(error).text()).tooltip("show");
                } else {
                    $(element).attr("title",
                            $(error).text()).tooltip("show");
                }
            },
            submitHandler:function(form){
            	var flg = true;
            	if(softwareVersion == $("#version").val()){
            		DialogAlert("与当前版本一致请变更版本");
            		flg = false;
            	}
            	if($("#version").val() == "" || $("#version").val() == null){
            		DialogAlert("请选择版本号");
            		flg = false;
            	}
            	var jsondata = {
            			  		"definitionSubServs": [
            				    {
            				      "name": "upsql",
            				      "softwareImage": $("#version").val()
            				    }
            				  ]
            				};
            	if(flg){
	            	//在这里调用ajax方法提交
	            	sendPut("/upm_manager/v1.0/servs/"+serviceId+"?type=image_update", postSuccess,DialogAlert, JSON.stringify(jsondata), null);
            	}
            }
        };
        $('#checkout-form').validate(option);
    };
    loadScript("js/plugin/jquery-form/jquery-form.min.js", pagefunction);
    
    $('#submitbtn').click(function() {
    	DialogAlertClear();
    	$('#checkout-form').submit();
    });
    function postSuccess(data){
    	//提交成功的方法
    	$("#changeModal").modal('toggle');
    	sendGet("/upm_manager/v1.0/servs?site="+getSession("siteId")+'&serv_type=upsql_upproxy_swm',reloadGrid,ListAlert,null);
    }
    
    function fillForm(data){
    		var s = $("#jqgrid").jqGrid('getGridParam', 'selarrrow');
            softwareVersion = $("#jqgrid").jqGrid('getRowData',s).softwareImageId;
            
    		if(data.length == 0){
        		flgScales = false;
        		DialogAlert("无可用软件版本");
        		return;
        	}
    		else{
    			version = $version[0].selectize;
	        	version.clearOptions();
	        	$.each(data, function(k, v){
	        		version.addOption(v);
	        		if(softwareVersion == v.id){
	        			version.setValue([v.id]);
	        		}
	        	});
    		}
        	
    }
</script>